<template>
  <div>
    <test text="渲染" />
    <br />
    <child />
    <br />
    <world />
  </div>
</template>

<script setup lang="ts">
import { h } from 'vue';
import img from '@/assets/vue.svg';
import HelloWorld from '@/components/HelloWorld.vue';
interface Props {
  text?: string;
}
defineProps<Props>();
const test = (props: Props) =>
  h('div', { id: 'test', class: 'test' }, props.text);

const child = () =>
  h('div', { id: 'child' }, [
    h('img', {
      alt: 'vue.logo',
      src: img,
      width: 200,
    }),
    h('div', { class: 'test' }, 'child-2'),
  ]);

const world = h('p', { id: 'app' }, [
  h('img', {
    alt: 'vue.logo',
    src: img,
  }),
  h(HelloWorld, {
    msg: 'Welcome to Jieeeeeeny Vue.js + TypeScript App',
    name: '李四',
    age: 15,
    sex: '男',
  }),
]);
</script>

<style scoped lang="less">
.test {
  width: 200px;
  height: 200px;
  background-color: aqua;
}
#child {
  color: red;
  // height: 50px;
  background-color: pink;
}
</style>
